<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .justify-fix
        {
            display: inline-block;
            width: 128px;
            outline: 1px solid red;
        }

        .dib-baseline {
            display: inline-block; width: 150px; height: 150px;
            border: 1px solid #cad5eb; background-color: #f0f3f9;
        }

        .ul{
            font-size: 0;
        }
        .ul li{
            display: inline-block;
            background-color: #1b6d85;
            width: 50px;
            height: 20px;
            font-size: 12px;
        }
    </style>
</head>
<body>
    <div style="text-align: justify; width: 400px;background-color: #2aabd2;margin-bottom: 40px;line-height: 0">
        <img src="images/mm1.jpg" width="128">
        <img src="images/mm1.jpg" width="128">
        <img src="images/mm1.jpg" width="128">
        <img src="images/mm1.jpg" width="128">
        <i class="justify-fix"></i>
        <i class="justify-fix"></i>
        <i class="justify-fix"></i>X-baseline
    </div>

    <span class="dib-baseline"></span>
    <span class="dib-baseline">x-baseline</span>

    <ul class="ul">
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
</body>
</html>